<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="年度" prop="year">
        <el-date-picker
          v-model="queryParams.year"
          type="year"
          format="yyyy"
          value-format="yyyy"
          placeholder="选择年度"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="水管机构" prop="orgCd" width="50px">
        <treeselect
          v-model="queryParams.orgCd"
          :options="xzqhOptions"
          :normalizer="normalizer"
          :show-count="true"
          placeholder="行政区划"
          @select="selectAd"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['waterDistribution:wrPlanDayRiun:export']"
          >导出</el-button
        >
      </el-form-item>
    </el-form>

    <!-- <div class="tb_left" >年度限额总指标：<span class="hj_cl_blue">48837m³</span></div> -->
    <div class="tb_title" v-html="tableTitle"></div>
    <div class="tb_dw">单位：<span class="hj_cl_blue">m³</span></div>

    <el-table
      v-loading="loading"
      stripe
      :data="wrPlanDayAdList"
      :header-cell-style="tableHeaderColor"
      :span-method="objectSpanMethod"
    >
      <el-table-column
        label="年度"
        fixed="left"
        align="center"
        prop="year"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span class="">{{ scope.row[0] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="灌季"
        fixed="left"
        align="center"
        prop="quarter"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span class="hj_cl">{{ scope.row[1] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="月"
        fixed="left"
        align="center"
        prop="month"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span class="hj_cl">{{ scope.row[2] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="旬"
        fixed="left"
        align="center"
        prop="dt"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span class="hj_cl">{{ scope.row[3] }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column :label="this.queryParams.orgCd == '652901000000' ? '各乡（镇）':'各合作社'" align="center" prop="dt" show-overflow-tooltip>
                <el-table-column
                    v-for="(item, index) in tableLabel"
                    :key="index"
                    :prop="item.orgCd"
                    :label="item.orgNm"
                    align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span class="hj_cl" >{{ scope.row[4 + index] == '0.00'?'':scope.row[4 + index]}}</span>
                    </template>
                </el-table-column>
            </el-table-column> -->
      <el-table-column
        label="水量"
        align="center"
        prop="dayW"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span class="hj_cl">{{
            scope.row[tableLabel.length + 4] == "null"
              ? "--"
              : scope.row[tableLabel.length + 4]
          }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  getOrgPlanByPlanYmAndOrgCd,
  selectRiunList,
} from "@/api/waterDistribution/wrPlanDayRiun";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { organtreeList } from "@/api/common";
export default {
  name: "WrPlanDayAd",
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      rowSpanArrYear: [],
      rowSpanArrQuarter: [],
      rowSpanArrMonth: [],
      positionYear: 0,
      positionQuarter: 0,
      positionMonth: 0,
      // 年份选择
      yearList: [],
      // 行政区用水日计划表格数据
      wrPlanDayAdList: [],
      // 行政区划树选项
      xzqhOptions: [],
      // 表头行政区划名称数组
      tableLabel: [],
      // 弹出层标题
      title: "",
      // 列表标题行内容
      tableTitle: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 70,
        year: null,
        orgCd: "ORG6543220000",
        tableTitle: null,
      },
      // 合计统计
      sums: [],
      showSum: false,
      myheight: 600,
    };
  },
  created() {
    // this.getorgNms(this.queryParams.orgCd);
    this.getList();
  },
  mounted() {
    this.getTreeselect();
  },
  methods: {
    // 获取区划名称
    selectAd(val) {
      if (val.orgNm == "富蕴县") {
        this.tableTitle =
          `富蕴县各乡（镇）` +
          this.queryParams.year +
          `年1月—12月限额用水计划过程表`;
      } else {
        this.tableTitle =
          val.orgNm +
          `各用水合作社` +
          this.queryParams.year +
          `年1月—12月限额用水计划过程表`;
      }
    },
    /** 查询行政区用水日计划列表 */
    getList() {
      this.loading = true;
      if (this.queryParams.year == null) {
        var day = new Date();
        var nowYear = day.getFullYear().toString();
        this.queryParams.year = nowYear;
      }
      // this.getorgNms(this.queryParams.orgCd);
      this.tableTitle =
        this.tableTitle == ""
          ? `富蕴县各乡（镇）` +
            this.queryParams.year +
            `年1月—12月限额用水计划过程表`
          : this.tableTitle;
      if (
        this.queryParams.orgCd != undefined &&
        this.queryParams.orgCd != null &&
        this.queryParams.orgCd != ""
      ) {
        getOrgPlanByPlanYmAndOrgCd(this.queryParams).then((response) => {
          this.wrPlanDayAdList = response.rows;
          this.total = response.total;
          this.loading = false;
          this.getRowSpan(this.wrPlanDayAdList);
        });
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.queryParams.tableTitle = this.tableTitle;
      var code = this.queryParams.orgCd;
      var char = code.substring(6, 9);
      // if ('000' == char) {
      //   this.download('distribute/distribute/wrPlanDayRiun/exportorgCd', {
      //     ...this.queryParams
      //   }, this.tableTitle + `.xlsx`)
      // } else {
      //   this.download('distribute/distribute/wrPlanDayRiun/export', {
      //     ...this.queryParams
      //   }, this.tableTitle + `.xlsx`)
      // }
      this.download(
        "distribute/WiOrgplanM/export2",
        {
          ...this.queryParams,
        },
        this.tableTitle + `.xlsx`
      );
    },
    /** 获取表头 */
    getorgNms(orgCd) {
      if (orgCd != undefined && orgCd != null && orgCd != "") {
        var char = orgCd.substring(6, 9);
        if ("000" == char) {
          selectAdList5(orgCd).then((response) => {
            this.tableLabel = response.data;
          });
        } else {
          selectRiunList(orgCd).then((response) => {
            this.tableLabel = response.data;
          });
        }
      } else {
        selectAdList5(orgCd).then((response) => {
          this.tableLabel = response.data;
        });
      }
    },
    /** 修改table header的背景色 */
    tableHeaderColor(row, rowIndex) {
      return "background-color: #e6f4f8; font-weight: 700px !important;";
    },
    // 合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.rowSpanArrYear[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row, //行
          colspan: _col, //列
        };
      }
      if (columnIndex === 1) {
        const _row1 = this.rowSpanArrQuarter[rowIndex];
        const _col1 = _row1 > 0 ? 1 : 0;
        // 年总水量
        if (rowIndex == 47) {
          return {
            rowspan: 1, //行
            colspan: 3, //列
          };
        } else {
          return {
            rowspan: _row1, //行
            colspan: _col1, //列
          };
        }
      }
      if (columnIndex === 2) {
        const _row2 = this.rowSpanArrMonth[rowIndex];
        // if(rowIndex == 12 || rowIndex == 29 || rowIndex == 46) {
        //   return {
        //     rowspan: 1, //行
        //     colspan: 2 //列
        //   };
        // }else
        if (rowIndex == 47) {
          return {
            rowspan: 0, //行
            colspan: 0, //列
          };
        } else {
          return {
            rowspan: _row2, //行
            colspan: 1, //列
          };
        }
      }
      if (columnIndex === 3) {
        //小计
        // if(rowIndex == 12 || rowIndex == 29 || rowIndex == 46 || rowIndex == 47) {
        //   return {
        //     rowspan: 0, //行
        //     colspan: 0 //列
        //   };
        // }else {
        return {
          rowspan: 1, //行
          colspan: 1, //列
        };
        // }
      }
    },
    // 获取合并的数组
    getRowSpan(data) {
      this.rowSpanArrYear = [];
      this.rowSpanArrQuarter = [];
      this.rowSpanArrMonth = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.rowSpanArrYear.push(1);
          this.rowSpanArrQuarter.push(1);
          this.rowSpanArrMonth.push(1);
          this.positionYear = 0;
          this.positionQuarter = 0;
          this.positionMonth = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          // 年
          if (data[i][0] === data[i - 1][0]) {
            this.rowSpanArrYear[this.positionYear] += 1;
            this.rowSpanArrYear.push(0);
          } else {
            this.rowSpanArrYear.push(1);
            this.positionYear = i;
          }
          // 季度
          if (data[i][1] === data[i - 1][1]) {
            this.rowSpanArrQuarter[this.positionQuarter] += 1;
            this.rowSpanArrQuarter.push(0);
          } else {
            this.rowSpanArrQuarter.push(1);
            this.positionQuarter = i;
          }
          // 月
          if (data[i][2] === data[i - 1][2]) {
            this.rowSpanArrMonth[this.positionMonth] += 1;
            this.rowSpanArrMonth.push(0);
          } else {
            this.rowSpanArrMonth.push(1);
            this.positionMonth = i;
          }
        }
      }
    },
    /** 查询行政区域下拉树结构 */
    getTreeselect() {
      organtreeList({}).then((response) => {
        this.xzqhOptions = this.handleTree(
          response.data,
          "orgCd",
          "parentOrgCd"
        );
      });
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.orgCd,
        label: node.orgNm,
        children: node.children,
      };
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.tb_title {
  // width: 430px;
  text-align: center;
  margin: 5px auto;
  margin-bottom: 15px;
  font-weight: 700;
}

.tb_dw {
  font-size: 13px;
  position: absolute;
  top: 84px;
  right: 40px;
}

.tb_left {
  font-size: 13px;
  position: absolute;
  top: 84px;
  left: 40px;
}

.hj_cl {
  font-weight: 700;
}

.hj_cl_blue {
  color: #1890ff !important;
  font-weight: 700;
}

.el-table__footer-wrapper tbody td.el-table__cell {
  font-weight: 700;
}
.el-table .el-table__footer-wrapper .cell {
  font-weight: 700;
}

.vue-treeselect__placeholder,
.vue-treeselect__single-value {
  line-height: 30px;
}

.vue-treeselect {
  width: 300px;
  height: 30px;
  .vue-treeselect__control {
    height: 30px;
    .el-form-item--medium .el-form-item__content {
      line-height: 30px;
      .vue-treeselect__placeholder,
      .vue-treeselect__single-value {
        line-height: 30px;
      }
    }
  }
}

.el-table th.gutter {
  display: table-cell !important;
}
</style>

